
<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="组件属性" name="component">
        <component
          v-if="current"
          ref="ComponentRef"
          :is="current.type + '-setting-designer'"
          :current="current"
        ></component>
        <div v-else>  
          <over-all-config></over-all-config>
        </div>
      </el-tab-pane>
      <el-tab-pane label="页面属性" name="style">
        <over-all-config></over-all-config>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, inject, computed, toRefs, reactive } from "vue";
import { LowCodeImp } from "@/components/low-code/core";
import overAllConfig from "./over-all-config/index.vue";

export default defineComponent({
  components: {
    overAllConfig
  },
  setup() {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const current = computed(() => {
      return lowCode.dataCenter[lowCode.currentKey];
    });

    const data = reactive({
      activeName: "component",
      handleClick() {},
    });

    return {
      current,
      ...toRefs(data),
    };
  },
});
</script>

<style  scoped>
:deep(.el-tabs__nav) {
  width: 100% !important;
}
:deep(.el-tabs__item) {
  width: 50% !important;
  text-align: center;
}
:deep(.el-tabs__active-bar) {
  width: fit-content;
}
</style>
